<template>
  <h1>(readonly,shallowReadonly的使用)</h1>
  <h2>姓名:{{persion.name}}</h2>
  <h2>年龄:{{persion.age.j1.age}}</h2>
  <button @click="persion.name += '!'">修改姓名</button>
  <button @click="persion.age.j1.age++">修改年龄</button>
</template>

<script>
import { readonly, reactive, shallowReadonly } from 'vue'
export default {
  setup () {
    // readonly让响应式数据变为只读数据(深层次)
    // let persion = readonly(reactive({
    //   name: '张三',
    //   age: {
    //     j1: {
    //       age: 18
    //     }
    //   }
    // }))


    // shallowReadonly让响应式数据变为只读数据(浅层次)
    let persion = shallowReadonly(reactive({
      name: '张三',
      age: {
        j1: {
          age: 18
        }
      }
    }))
    return {
      persion
    }
  }
}
</script>